<template>
  <div class="my-wrap">
    <div class="my-info">
        <div class="modal"></div>
        <div class="info-wrap">
            <div class="avatar">
                <img class="zoomIn animated" :src="infoObj.avatarUrl?infoObj.avatarUrl:this.avatar" alt="">
            </div>
            <div class="name zoomIn animated">{{infoObj.userName}}</div>
        </div>
    </div>
    <div class="address over-hidden flex-box-align">
      <span class="flex" style="overflow: hidden;text-overflow: ellipsis">区块地址：{{infoObj.address}}</span>
      <button class="btn-copy" type="button"
              v-clipboard:copy.stop="infoObj.address"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError">复制</button>
    </div>
    <div class="my-item">
      <div class="my-list box box-align-center" @click="linkTo('myVoteList')">
        <div class="icon"></div>
         我参与的投票
      </div>
      <div class="my-list box box-align-center"  @click="linkTo('myApply')">
        <div class="icon"></div>
        我的申请
      </div>
      <div class="my-list box box-align-center"  @click="linkTo('myVoteValidate')" >
        <div class="icon"></div>
        投票验证
      </div>
    </div>
    <div class="my-list box box-align-center setting"  @click="linkTo('setting')" >
        <div class="icon"></div>
        设置
    </div>
    <menu-list></menu-list>
  </div>
</template>
<script>
import menuList from '../common/navbar-menu'
import "../animate.css";
let CONSTANT = require('../../../wechat/static/constant/constant.js'),
    common = require("../../../wechat/static/common/common.js"),
    wsService = require("../../../wechat/static/common/wechat-jsdk.js");
  export default {
    data() {
      return {
        listlist:'',
        infoObj:'',
        avatar:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3987166397,2421475227&fm=27&gp=0.jpg'
      }
    },
    components: {
      menuList
    },
    mounted() {
      this.getInfo()
    },
    methods: {
      linkTo(link){
        this.$router.push(link)
      },
      getInfo(){
        let  url = CONSTANT.URL.USER.USERINFO,
            param = {}
        common.requestAjax(url,{},param,(res)=>{
            if(res.status == 200){
                let data = res.data.bussData;
                this.infoObj = data;
                console.log(data)
            }else{

            }
        })
      },
      loginOut(){
        let that = this;
        this.$vux.confirm.show({
          content: '是否退出登录?',
          onShow () {
            console.log('plugin show')
          },
          onHide () {
            console.log('plugin hide')
          },
          onCancel () {
            console.log('plugin cancel')
          },
          onConfirm () {
            let  url = CONSTANT.URL.LOGIN.LOGOUT,
            param = {}
            common.requestAjax(url,{},param,(res)=>{
              common.setCookie('sessionId','')
              common.setCookie('password','')
              common.setCookie('mobile','')
              that.$router.replace('/login')
            })

          }
        })
      },
      onCopy(val) {
        this.$vux.alert.show({
          title: "提示",
          content: "复制成功",
          onShow () {

          },
          onHide () {
          }
        })
        event.cancelBubble = true;
      },
      onError() {

      }
    }
  };
</script>
<style lang="less">
  .my-wrap {
    background-color: #f2f2f2;
    height: 100%;
    .btn-copy {
      display: inline-block;
      background-color: #198AE7;
      color: #fff;
      font-size: .26rem;
      padding: 2px .3rem;
      border-radius: .1rem;
      margin-left: .3rem;
      border: none;
    }
    .my-info{
      position: relative;
      width: 100%;
      height: 3.35rem;
      background-image: url(../../images/bg.jpg);
      background-size: 100%;
      .modal{
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, .53);
      }
      .info-wrap{
          position: absolute;
          top: 0;
          bottom:0;
          left: 0;
          right: 0;
          font-size: .32rem;
          color: #fff;
          text-align: center;
          padding-top: .55rem;
          img{
              width: 1.36rem;
              height: 1.36rem;
              border-radius: 50%;
              -webkit-border-radius: 50%;
              margin-bottom: .1rem;
          }
      }
    }
    .address{
        height:.88rem;
        line-height: .88rem;
        padding-left: .32rem;
        padding-right: .32rem;
        font-size: .28rem;
        color: #333;
        background-color: #fff;
        margin-bottom: .3rem;
    }
    .my-item{
      background-color: #fff;
      margin:  0 auto;
      padding-left: .3rem;
    }
    .my-list{
        position: relative;
        height: 1.1rem;
        font-size: .32rem;
        color: #333;
        border-bottom: 1px solid #DEDEDE;
        padding-right: .3rem;
        &:after{
            content:'';
            position: absolute;
            right: .3rem;
            top: .41rem;
            width: .15rem;
            height:.15rem;
            border-top: 1px solid #333;
            border-right: 1px solid #333;
            -webkit-transform: rotate(45deg);
        }
        .icon{
          background-image: url(../../images/me1.png);
          background-size:100%;
          width: .36rem;
          height: .38rem;
          margin-right: .23rem;
        }
        &:nth-child(2){
          .icon{
            background-image: url(../../images/me2.png);
            width: .27rem;
            height: .31rem;
            margin-right: .29rem;
          }
        }
        &:nth-child(3){
          border: 0px;
          .icon{
            background-image: url(../../images/me3.png);
            width: .29rem;
            height: .33rem;
            margin-right: .28rem;
          }
        }
        &.setting{
          margin-top: .3rem;
          background-color: #fff;
          padding-left: .3rem;
          border: 0px;
          &:after{
            right: .3rem;
            }
          .icon{
            background-image: url(../../images/me4.png);
            width: .32rem;
            height: .32rem;
            margin-right: .26rem;
          }
        }
    }
    .my-btn{
      width: 6.9rem;
      height: .88rem;
      border-radius: 4px;
      background-color: #fff;
      line-height: .88rem;
      text-align: center;
      box-shadow: 1px 1px 5px  rgba(0, 0, 0, .09);
      -webkit-border-radius: 4px;
      margin: .47rem auto 0;
      color: #3A75B9;
      font-size: .34rem;
    }
    .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
      color: #0063AE;
    }
  }
</style>

